//基础修饰
@mixin borRadius($radius:50%){
  border-radius: $radius;
}

//1px边框
//通过background实现的1px，设置到dom本身，不会绘制padding和margin区域
@mixin onePxByBg($borColor:#efefef,$direction:bottom,$borPx:1px) {
  background-image: -webkit-linear-gradient(top, $borColor, $borColor 50%, transparent 50%);
  background-image: linear-gradient(180deg, $borColor, $borColor 50%, transparent 50%);
  background-size: 120% $borPx;
  background-repeat: no-repeat;
  background-origin: content-box;
  @if $direction == bottom {
    background-position: bottom left;
  }
  @else if $direction == top {
    background-position: top left;
  }
}
//下面是通过伪类实现的1px线条
@mixin oneRectangle($borColor:#efefef, $direction: bottom, $borPx: 1px, $pos: after) {
  &:#{$pos} {
    position: absolute;
    transform-origin: 0 0;
    content: '';
    background-color: $borColor;
    @if $direction == bottom {
      bottom: -$borPx;
      left: 0;
      width: 100%;
      height: $borPx * 2;
      transform: scale(1,.5);
    }
    @else if $direction == top {
      top: -$borPx;
      left: 0;
      width: 100%;
      height: $borPx * 2;
      transform: scale(1,.5);
    }
    @else if $direction == right {
      top: 0;
      left: -$borPx;
      width: $borPx * 2;
      height: 100%;
      transform: scale(.5,1);
    }
    @else if $direction == left {
      top: 0;
      right: -$borPx;
      width: $borPx * 2;
      height: 100%;
      transform: scale(.5,1);
    }
  }
}

@mixin notStatic($position: absolute, $top: auto, $right: auto, $bottom: auto, $left: auto, $index:3) {
  top: $top;
  right: $right;
  bottom: $bottom;
  left: $left;
  z-index: $index;
  @if $position == absolute {
    position: absolute;
  }
  @else if $position == relative {
    position: relative;
  }
  @else if $position == fixed {
    position: fixed;
  }
}

@mixin absoYCenter{
  @include notStatic(absolute, 50%,auto,auto,auto,3);
  transform: translateY(-50%);
}
@mixin absoXCenter{
  @include notStatic(absolute, auto,auto,auto,50%,3);
  transform: translateX(-50%);
}
@mixin absoCenter{
  @include notStatic(absolute, 0,0,0,0,3);
}
@mixin absoBot{
  @include notStatic(absolute, auto,0,0,0,3);
}

//关于文本的基础样式，诸如颜色，字体，对齐方式等
@mixin txtCenter{
  text-align: center;
}
@mixin txtLeft{
  text-align: left;
}
@mixin txtRight{
  text-align: right;
}
@mixin pullLeft{
  float: left;
}
@mixin pullRight{
  float: right;
}
@mixin clear{
  &::after{
    display: block;
    content: '.';
    visibility:hidden;
    height:0;
    clear:both;
  }
}
@mixin overClear{
  overflow: hidden;
}
//行高
@mixin lineHei($lineHei:1.5){
  line-height: $lineHei;
}
//单行及多行文本溢出控制
@mixin singleLimitWidth() {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

@mixin doubleLimitWidth($num:2){
  display: -webkit-box !important;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  -webkit-box-orient: vertical;
  -webkit-line-clamp:$num;
}

//文字大小定义
@mixin fontDpr($fontSize:12px){
  font-size: $fontSize;
  [data-dpr = '2'] & {
    font-size: $fontSize*2;
  }
  [data-dpr = '3'] & {
    font-size: $fontSize*2;
  }
}

@mixin disabled($bgColor: #e6e6e6,$textColor:#ababab){
  background-color: $bgColor !important;
  color: $textColor !important;
  cursor: not-allowed !important;
}

//内阴影和外阴影
@function black($opacity) {
  @return rgba(0, 0, 0, $opacity)
}

@function white($opacity) {
  @return rgba(255, 255, 255, $opacity)
}
@mixin box-emboss($opacity, $opacity2) {
  box-shadow: white($opacity) 0 1px 0, inset black($opacity2) 0 1px 0;
}
//隐藏文字
@mixin hide-text {
  overflow: hidden;
  text-indent: -9000px;
  display: block;
}
//边框阴影
@mixin boxshadow($x: 3px, $y: 3px, $extend: 4px, $shadowcolor: #cccccc) {
  box-shadow: $x $y $extend $shadowcolor;
}
//动画keyframes生成
@mixin keyframes($animationName) {
  @keyframes #{$animationName} {
    @content;
  }
}

// 圆角
@mixin circleCorner($pos: before,$where: tl, $radius: 30px, $bgColor: transparent) {
  & {
    overflow: hidden;
  }
  &:#{$pos} {
    content: ' ';
    width: $radius;
    height: $radius;
    border-radius: 50%;
    overflow: hidden;
    background: $bgColor;
    @if $where == tl {
      @include notStatic(absolute, 0, auto, auto, 0);
      transform: translate(-50%, -50%);
    } @else if $where == tr {
      @include notStatic(absolute, 0, 0, auto, auto);
      transform: translate(50%, -50%);
    } @else if $where == br {
      @include notStatic(absolute, auto, 0, 0, auto);
      transform: translate(50%, 50%);
    } @else if $where == bl {
      @include notStatic(absolute, auto, auto, 0, 0);
      transform: translate(-50%, 50%);
    }
  }
}
//直角三角形
@mixin triangle($direction: br){
  width: 0;
  height: 0;
  @if $direction == br{
    border-bottom: 0.2rem solid #000;
    border-left: 0.2rem solid transparent;
  }@else if $direction == bl{
    border-bottom: 0.2rem solid red;
    border-right: 0.2rem solid transparent;
  }@else if $direction == tr{
    border-top: 0.2rem solid red;
    border-left: 0.2rem solid transparent;
  }@else if $direction == tl{
    border-top: 0.2rem solid red;
    border-right: 0.2rem solid transparent;
  }
}

